.user {
  display: block;
  position: relative;
  height: 8rem;
  padding: 0.5rem;
  margin: 0 0 1rem;
  background: white;
  border: 1px solid $card-border-color;
  border-radius: $border-radius;

  img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 200px;
    max-height: 100px;
  }

  &-target {
    position: relative;
    top: -140px;

    &:target + a {
      z-index: 1;
      border-color: transparent;
      box-shadow: 0 0 0 5px $brand-primary;
      animation: 1s tada 0.5s 1 both;
    }
  }
}

@keyframes tada {
  0%,
  100% {
    transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 0deg);
  }
  10%,
  20% {
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }
  30%,
  50%,
  70%,
  90% {
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }
  40%,
  60%,
  80% {
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }
}
